<template>
	<div>
		<el-carousel :interval="3000" arrow="always" class='lunbo'height='2rem'>
		    <el-carousel-item v-for="(item,index) in lubotu" :key="index" height='2rem'>
				<img :src="item" alt="" height='100%' width="100%">
		    </el-carousel-item>
		</el-carousel>
		<div class="tuijian">
			<div v-for="(value,index) in tuijian">
				<img :src="value.picUrl" >
				<p>{{value.productName}}</p>
			</div>
		</div>
		<div class="remengoods">
			<div class="div1">热门商品</div>
			<div class="div2" v-for="iten in remengoods">
				<div class="div2-imger">
					<img :src="iten.picUrl" alt="">
				</div>
				<div class="div2-p1">{{ iten.productName }}</div>
				<div class="div2-p2">{{ iten.subTitle }}</div>
				<div class="div2-p3">￥1</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'fgone',
		data(){
			return{
				lubotu: [],
				tuijian: [],
				remengoods: []
			}
		},
		async created(){
			try{
				const res = await this.axios.get('/api/goods/firstpage')
				var lubotu = res.data.result[0].panelContents
				var lubotuList = []
				lubotuList.push(lubotu[0].picUrl2)
				lubotuList.push(lubotu[1].picUrl2)
				lubotuList.push(lubotu[1].picUrl3)
				lubotuList.push(lubotu[2].picUrl)
				// console.log(lubotuList)
				// console.log(res.data.result[1].panelContents)
				this.lubotu = lubotuList
				this.tuijian = res.data.result[1].panelContents
				console.log(res.data.result[2].panelContents)
				this.remengoods = res.data.result[2].panelContents
			}catch(err){
				console.log(err.message)
			}
		}
	}
</script>

<style lang="less">
	.el-carousel__item:nth-child(2n) {
		 background-color: #99a9bf;
	}
	  
	.el-carousel__item:nth-child(2n+1) {
		 background-color: #d3dce6;
	}
	.tuijian{
		width: 100%;height: 1.2rem;display: flex;
		div{
			width: 25%;height: 1rem;
			img{
				width: 100%;height: .8rem;
			}
			p{
				width: 100%;height: .2rem;font-size: .1rem;background-color: #F7F7F7;white-space:nowrap;
				overflow: hidden; text-overflow:ellipsis;text-align: center;line-height: .2rem;
			}
		}
	}
	.remengoods{
		width: 100%;height: 1.8rem;
		.div1{
			width: 100%;height: .2rem;background-color:#F7F7F7;
		font-size: .12rem;border-bottom: .5px solid #ccc;padding-left: .1rem;padding-top: .04rem;
		}
		.div2{
			width: 50%;height: 1.6rem;float: left;
			.div2-imger{
				width: 100%;height: 1rem;display: flex;justify-content: center;align-items: center;
				img{
					width: .6rem;height: rem;
				}
			}
			.div2-p1{
				height: .2rem;font-size: .1rem;text-align: center;
			}
			.div2-p2{
				height: .2rem;font-size: .08rem;text-align: center;opacity: .6;
			}
			.div2-p3{
				height: .2rem;font-size: .14rem;text-align: center;
				color: red;
			}
		}
	}
</style>
